Display and Positioning: Inline & Block

The biggest distinction between outside display options is whether elements occupy the entire horizontal line they are on (remember that elements are organized hierarchically on the DOM) or if they only occupy the width they need and then the following element can be placed next to them on the same horizontal line.

Imagine there were two elements with the class box created with HTML like this:

<div class=”box”>Box 1</div>
<div class=”box”>Box 2</div>

In the CSS code if we set the box class display property to block, each rectangle would take up its own line and would be positioned one on top of the other. However, if we set the display property to inline-block, the rectangles would be displayed side by side on the same line. Here is what the CSS could look like:

.box{
  display: inline-block;
}

The value inline is most often used to highlight specific text within a larger text element, span elements are a common example. Elements set to inline display have no width or height and only occupy the space that their text property (or .innerHTML property) takes up. So in our box class example above, the rectangles would display on the same line but only occupy as much space as their text needs to display.

Exercise: Inline-block vs. Block

Use the workspace provided to test out different display values for the box class.